<script setup>
import { ref, reactive } from "vue";
import {
  getMenuList,
  getMenuDrop,
  addMenu,
  delMenu,
  editMenulnfo,
  editMenu,
} from "@/api/menu";
import { ElMessage } from "element-plus";
import { useAppStore } from "@/store/app";

const appStore = useAppStore();

const menuList = ref([]);
const loading = ref(false);
const submitLoading = ref(false);
const addClassConfig = reactive({
  show: false,
  title: "添加菜单",
});
const ruleFormRef = ref();
const classList = ref();
const formData = reactive({
  id: 0,
  title: "",
  sort: "",
  pid: "",
  uri: "",
  is_menu: 0,
});
const rules = reactive({
  title: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
  sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
  pid: [{ required: true, message: "请选择上级分类", trigger: "blur" }],
});
getMenuListData();
async function getMenuListData() {
  loading.value = true;
  const res = await getMenuList();
  loading.value = false;
  menuList.value = res.data;
}
async function addClassFn() {
  addClassConfig.show = true;
}
getClassList();
async function getClassList() {
  const res = await getMenuDrop();
  formatdata(res.data);
  classList.value = res.data;

  function formatdata(e) {
    e.forEach((element) => {
      if (element.child) {
        element.children = element.child;
        formatdata(element.child);
      } else {
        element.value = element.id;
      }
    });
  }
}
async function submitForm(formel) {
  await formel.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;
      if (addClassConfig.title == "编辑菜单") {
        const res = await editMenu(formData);
        submitLoading.value = false;
        if (res.code == 200) {
          resetForm(formel);
          addClassConfig.show = false;
          ElMessage.success("编辑成功");
          getMenuListData();
        }
      } else {
        const res = await addMenu(formData);
        submitLoading.value = false;
        if (res.code == 200) {
          resetForm(formel);
          addClassConfig.show = false;
          ElMessage.success("添加成功");
          getMenuListData();
        }
      }
    }
  });
}
const resetForm = (formel) => {
  if (!formel) return;
  formel.resetFields();
};
async function delMenuFn(row) {
  const res = await delMenu({ id: row.id });
  if (res.code == 200) {
    ElMessage.success("删除成功");
    getMenuListData();
  }
}
function resetFormData() {
  Object.keys(formData).forEach((item) => {
    formData[item] = "";
  });
}
async function editMenuFn(row) {
  resetFormData();
  appStore.startLoading({ text: "数据获取中...", background: "rgba(0, 0, 0, 0.3)" });
  const res = await editMenulnfo({ id: row.id });
  appStore.closeLoading();
  addClassConfig.title = "编辑菜单";
  addClassConfig.show = true;
  const data = res.data;

  formData.id = data.id;
  formData.title = data.title;
  formData.sort = data.sort;
  formData.pid = data.pid;
  formData.uri = data.uri;
  formData.is_menu = data.is_menu;
}
</script>

<template>
  <div class="container">
    <p class="title">菜单管理</p>
    <div class="box mb-2">
      <el-button type="primary" @click="addClassFn()">添加菜单</el-button>
    </div>
    <div class="box">
      <el-table
        v-loading="loading"
        :data="menuList"
        style="width: 100%"
        row-key="id"
        :tree-props="{ children: 'child' }"
      >
        <el-table-column prop="title" label="分类名称" />
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column label="操作" fixed="right" width="180">
          <template v-slot="scope">
            <div>
              <el-button text type="primary" @click="editMenuFn(scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                title="确定删除吗？"
                @confirm="delMenuFn(scope.row)"
              >
                <template #reference>
                  <el-button text type="warning">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="addClassConfig.show" :title="addClassConfig.title" width="500">
      <div>
        <el-form
          ref="ruleFormRef"
          :model="formData"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
          @keyup.enter="submitForm(ruleFormRef)"
        >
          <el-form-item label="上级菜单" prop="pid">
            <el-tree-select
              placeholder="请选择分类"
              v-model="formData.pid"
              :data="classList"
              check-strictly
              :render-after-expand="false"
            />
          </el-form-item>
          <el-form-item label="菜单名称" prop="title">
            <el-input v-model="formData.title" placeholder="请输入分类名称" />
          </el-form-item>
          <el-form-item label="链接" prop="uri">
            <el-input v-model="formData.uri" placeholder="请输入链接" />
          </el-form-item>

          <el-form-item label="排序" prop="sort">
            <el-input type="number" v-model="formData.sort" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="是否为菜单" prop="is_menu">
            <el-switch
              v-model="formData.is_menu"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            :loading="submitLoading"
            type="primary"
            @click="submitForm(ruleFormRef)"
          >
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
